<template>
  <view class="tool-wrap">
    <button class="btn" @tap="pick" :disabled="loading">选择图片</button>
    <image v-if="img" :src="img" mode="widthFix" class="preview" />
    <text class="hint" v-if="!loading && !result">点击上方按钮上传图片，系统将自动提取图片中的文字。</text>
    <text class="loading" v-if="loading">正在提取文字，请稍候...</text>
    <text class="error" v-if="error">{{ error }}</text>
    <view v-if="result" class="result-container">
      <text class="result-title">识别结果：</text>
      <text class="result-text">{{ result }}</text>
      <button class="copy-btn" @tap="copyResult">复制结果</button>
    </view>
  </view>
</template>

<script>
// 根据环境选择不同的OCR实现
let ocrProcessor;

// #ifdef MP-WEIXIN
// 微信小程序环境 - 使用微信云开发或其他小程序兼容方案
ocrProcessor = {
  async recognize(imagePath) {
    try {
      // 尝试调用微信小程序的AI能力
      // 注意：这需要在微信小程序后台配置相应的能力
      const result = await new Promise((resolve, reject) => {
        // 在实际项目中，这里应该调用云函数或其他API
        // 为了演示，我们使用模拟数据
        setTimeout(() => {
          resolve({ text: '微信小程序环境识别结果示例' });
        }, 1000);
      });
      return result;
    } catch (error) {
      console.error('微信小程序OCR识别失败:', error);
      throw new Error('微信小程序OCR识别失败，请确认已开通相关能力');
    }
  }
};
// #else
// 非微信小程序环境 - 尝试使用Tesseract.js
// 使用动态导入以避免微信小程序环境报错
let createWorker;
try {
  import('tesseract.js').then(tesseract => {
    createWorker = tesseract.createWorker;
  }).catch(e => {
    console.warn('Tesseract.js 加载失败，可能在当前环境中不支持');
  });
} catch (e) {
  console.warn('Tesseract.js 加载失败，可能在当前环境中不支持');
}

ocrProcessor = {
  async recognize(imagePath) {
    if (!createWorker) {
      throw new Error('当前环境不支持OCR功能');
    }
    
    const worker = await createWorker('chi_sim+eng', 1, {
      logger: m => console.log('OCR进度:', m)
    });
    
    const { data } = await worker.recognize(imagePath);
    await worker.terminate();
    
    return { text: data.text };
  }
};
// #endif

export default {
  name: 'OcrPlaceholder',
  data() {
    return {
      img: '',
      result: '',
      loading: false,
      error: ''
    }
  },
  methods: {
    pick() {
      this.error = ''
      this.result = ''
      
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.img = res.tempFilePaths[0]
          this.extractText(this.img)
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
          this.error = '选择图片失败，请重试'
        },
        complete: () => {
          // 完成回调
        }
      })
    },
    
    async extractText(imagePath) {
      this.loading = true
      this.error = ''
      this.result = ''
      
      try {
        // 显示加载中提示
        uni.showLoading({
          title: '正在提取文字...',
          mask: true
        });
        
        // 根据当前环境执行不同的OCR处理
        const { text } = await ocrProcessor.recognize(imagePath);
        
        // 显示结果
        this.result = text.trim() || '未识别到文字';
        
        // 隐藏加载提示
        uni.hideLoading();
        
      } catch (err) {
        console.error('OCR识别失败:', err);
        // 隐藏加载提示
        uni.hideLoading();
        
        // 根据错误类型显示不同的提示
        if (isWechatMiniProgram) {
          this.error = '微信小程序环境下OCR功能需要配置云函数或使用微信AI能力';
        } else if (err.message.includes('环境不支持')) {
          this.error = '当前环境不支持OCR功能，建议在H5环境中使用';
        } else {
          this.error = '文字提取失败，请尝试清晰的图片或换个环境使用';
        }
      } finally {
        this.loading = false;
      }
    },
    
    copyResult() {
      if (!this.result) return
      
      uni.setClipboardData({
        data: this.result,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 2000
          })
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'error',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style>
.tool-wrap {
  display: grid;
  gap: 20rpx;
  padding: 20rpx;
}
.btn {
  height: 80rpx;
  border-radius: 20rpx;
  border: 2rpx solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #e9ecff;
  font-size: 28rpx;
  font-weight: 500;
}
.btn:disabled {
  opacity: 0.6;
}
.preview {
  width: 100%;
  border-radius: 16rpx;
  border: 1px solid rgba(255,255,255,.1);
}
.hint {
  color: #a7b0d9;
  font-size: 24rpx;
  text-align: center;
}
.loading {
  color: #409eff;
  font-size: 24rpx;
  text-align: center;
}
.error {
  color: #f56c6c;
  font-size: 24rpx;
  text-align: center;
}
.result-container {
  padding: 20rpx;
  background: rgba(255,255,255,.03);
  border-radius: 12rpx;
  border: 1px solid rgba(255,255,255,.1);
}
.result-title {
  color: #e9ecff;
  font-size: 26rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 10rpx;
}
.result-text {
  color: #d0d6ff;
  font-size: 24rpx;
  line-height: 1.6;
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
}
.copy-btn {
  margin-top: 16rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: rgba(64,158,255,.2);
  color: #409eff;
  border: 1px solid rgba(64,158,255,.3);
  font-size: 24rpx;
}
</style>


